<template>
  <div class="form-box">
    <el-form :model="formData" ref="form" label-width="160px" :rules="rules">
      <el-form-item label="提现账户">
        <el-radio>
          <span>余额</span>
        </el-radio>
      </el-form-item>
      <el-form-item label="店铺可提现余额">
        <div class="text">￥{{ withDrawalDetail.balance }}</div>
      </el-form-item>
      <el-form-item label="提现金额" prop="amount">
        <el-input placeholder="请输入提现金额" v-model="formData.amount" class="input-with-select" style="width: 245px" oninput="value=value.replace(/[^0-9]/g,'')">
          <template slot="prepend">￥</template>
        </el-input>
        <span class="tips" style="margin-left: 10px"> 单笔最低提现￥100元 </span>
        <div class="tips" style="margin-left: 10px">
          预计扣除手续费：￥{{ commission }}元（手续费：0.4%）
          <span v-if="minPrice" >不足￥1元时，按￥1元扣除</span>
        </div>
      </el-form-item>
      <el-form-item label="到账银行卡" prop="bankCardId">
        <div class="has__bank-list">
          <el-radio style="line-height: 36px;" v-model="formData.bankCardId" :label="item.bankId" v-for="item in hasBankLit" :key="item.bankId" class="block-radio" >
            <span>{{ item.bankName }}（{{ item.bankAccount }}）</span>
          </el-radio>
        </div>
        <el-button type="text"  @click="handleAdd"> 添加银行卡 </el-button>
      </el-form-item>
      <el-form-item label="短信验证码" prop="verifyCode">
        <el-input v-model="formData.verifyCode" placeholder="请输入验证码" :maxlength="6" style="width: 153px" ></el-input>
        <el-button class="m-l-10" type="primary" @click="handleGetCode"> {{ countDown ? countDown + "S 后重新获取" : "获取验证码" }}</el-button>
        <div class="tips"> {{ "验证短信将发送到你登录的手机" }}：{{ user.phonenumber }}，{{ "请注意查收" }} </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleOut" :loading="loading">确定提现</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getUserProfile } from "@/api/system/user";
import { sendVerify } from "@/api/login";
import { storeWallet, bankList,withdrawalAdd } from "@/api/asset/asset";
export default {
  data() {
    return {
      user: {},
      timer: null,
      countDown: 0,
      hasBankLit: [],
      formData: {
        amount: "",
        verifyCode: "",
        bankCardId: "",
        phonenumber:'',
      },
      rules: {
        bankCardId: [
          { required: true, message: "请选择到账银行卡", trigger: "change" },
        ],
        amount: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value < 100) {
                callback(new Error("单笔最低提现100元"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      withDrawalDetail: {},
      loading: false,
      minPrice: true,
    };
  },
  computed: {
    commission() {
      let val = this.formData.amount * 0.004;
      if (val < 1) {
        this.minPrice = true;
        return 1;
      } else {
        this.minPrice = false;
        return this.formData.amount * 0.004;
      }
    },
  },
  created() {
    this.getUser();
    this.getStoreWallet();
    this.getBankList();
  },
  methods: {
    /** 新增银行卡操作 */
    handleAdd() {
      this.$tab.openPage("新增银行卡", "/asset/addCard", { count: this.count });
    },
    //查询银行卡列表
    getBankList() {
      let parmas = {
        pageNo: 1,
        pageSize:500,
      }
      bankList(parmas).then((response) => {
        this.hasBankLit = response.data.records;
      });
    },
    /** 查询钱包信息 */
    getStoreWallet() {
      storeWallet().then((response) => {
        this.withDrawalDetail = response.data;
      });
    },
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
        this.formData.phonenumber= this.user.phonenumber
      });
    },
    handleGetCode() {
      if (this.countDown > 0) return;
      sendVerify(this.user.phonenumber).then((res) => {
        if (res.code == 200) {
          const title = "验证码已发送";
          this.$message.success(title, "success");
          if (this.countDown > 0) return;
          this.countDown = 60;
          this.handleCountDown();
        }
      });
    },

    handleCountDown() {
      this.countDown--;
      if (this.countDown) {
        this.timer = setTimeout(this.handleCountDown, 1000);
      }
    },

    handleOut() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.formData.amount > this.withDrawalDetail.balance) {
            const title = "提现金额不能大于店铺可提现金额";
            this.$message.error(title, "warning");
            return;
          }
          if (this.loading) return;
          this.loading = true;
          withdrawalAdd(this.formData).then((res) => {
              if (res.code == 200) {
                this.$message.success("提现申请已受理");
                this.getBankList()
                this.getStoreWallet()
                this.formData = this.$options.data().formData;
              }
            }).catch((err) => {

            }).finally(() => {
              this.loading = false;
            });
        }
      });
    },
  },
  beforeDestroy() {
    this.timer = null;
  },
};
</script>
<style lang="scss" scoped>
.form-box {
  margin-top: 30px;

  .text {
    font-size: 14px;
    font-weight: 400;
    color: #333;
  }
}

.tips {
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #c0c4cc;
}

.has__bank-list {
  align-items: center;

  img {
    width: 106px;
    height: 47px;
  }

  ::v-deep {
    .el-radio {
      display: flex;
      align-items: center;
    }
  }
}

.block-radio {
  margin-bottom: 20px;
}
.m-l-10{
  margin-left: 10px;
}
</style>
